<template>
    <section class="contianer">
        <el-row  type="flex" justify="space-between">

            <!-- 顶部过滤列表 -->
            <div class="flights-content">
                <!-- 过滤条件 -->
                <FlightsFilters
                :data="cacheFilghtsData"
                @changeFilghts="changeFilghts"
                />
                
                <!-- 航班头部布局 -->
               <FlightsListHead/>
                
                
                <!-- 航班信息 -->
                 <FlightsItem
                 v-for="(item,index) in dataList"
                 :key="index"
                 :data=item
                 />
       
                              <!-- 分页 -->
                    <el-row type="flex" justify="center" style="margin-top:10px;">
                        <!-- size-change：切换条数时候触发 -->
                        <!-- current-change：选择页数时候触发 -->
                        <!-- current-page: 当前页数 -->
                        <!-- page-size：当前条数 -->
                        <!-- total：总条数 -->
                        <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageIndex"
                        :page-sizes="[2, 4, 6, 8]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                        </el-pagination>
                    </el-row>
                  </div>
            <!-- 侧边栏 -->
            <div class="aside">
                <!-- 侧边栏组件 -->
                 <FlightsAside/>
            </div>
        </el-row>
    </section>
</template>

<script>

import FlightsListHead from '@/components/air/flightsListHead'
import FlightsItem from '@/components/air/flightsItem'
import FlightsFilters from '@/components/air/flightsFilters'
import FlightsAside from "@/components/air/flightsAside.vue"
export default {
  components: {
    FlightsListHead,
    FlightsItem,
    FlightsFilters,
    FlightsAside
  },
    data(){
        return {
            flightsItem : {    //总的数据
               flights: [],
                info: {},
                options: {}
            },  //总的数据
              //  用于缓存数据，一旦赋值，不会修改
            cacheFilghtsData: {    //
               flights: [],
                info: {},
                options: {}
            },
            // dataList: [],  //页面渲染的数组
           
            pageIndex: 1,
            pageSize: 4,
            total: 0
        }
    },
    // computed深度监听，可以监听多个属性变化，wacth监听单个
    computed : {
        dataList(){
           return this.flightsItem.flights.slice((this.pageIndex-1)*this.pageSize,this.pageIndex*this.pageSize);
        }
    },
    // watch : {
    //   // 监听url参数的变化
    //   $route (){
    //     this.getData();
    //   }
    // },
    // 方法2。使用组件导航守卫
    beforeRouteUpdate(to,from,next){
      next();
      this.getData();
    },
    mounted (){
      // console.log(this.$route.query);
      // 获取机票数据
      this.getData();
    },
    methods: {
          // 切换条的时候触发
    handleSizeChange(val){
      // console.log(val);
      this.pageSize = val;
      this.pageIndex = 1;
        // this.dataList = this.flightsItem.flights.slice((this.pageIndex-1)*this.pageSize,this.pageIndex*this.pageSize);
    },
    // 切换页的时候触发
    handleCurrentChange(value){
      // console.log(value);
      this.pageIndex = value;
      // this.dataList = this.flightsItem.flights.slice((this.pageIndex-1)*this.pageSize,this.pageIndex*this.pageSize);
    },
    // 传递给子组件修改数据列表
    changeFilghts(arr){
      this.flightsItem.flights = arr;
      // 从新获取总条数
      this.pageIndex = 1;
         this.total = this.flightsItem.flights.length;
    },
    getData (){
      this.pageIndex = 1;
      // 获取机票数据
             this.$axios({
        url: '/airs',
        params: this.$route.query,
      }).then((res) => {
        // console.log(res);
        this.flightsItem = res.data;
        this.cacheFilghtsData = {...res.data}
        this.total = this.flightsItem.flights.length;
        // this.dataList = this.flightsItem.flights.slice(0,this.pageSize);
      });
    }

    }

}
</script>

<style scoped lang="less">
    .contianer{
        width:1000px;
        margin:20px auto;
        background: #fff;
    }

    .flights-content{
        width:745px;
        font-size:14px;
    }

    .aside{
        width:240px;
    } 
</style>